
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>OrderList</title>
    <link rel="stylesheet" href="layui/css/layui.css">

    <style>
        .layui-table-page {
            text-align: center;
        }
    </style>
</head>

<script src="layui/layui.js" charset="utf-8"></script>

<body>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md3">

        </div>
        <div class="layui-col-md6">
            <h1>&nbsp;</h1>
            <h1 style="text-align: center">商品订单列表</h1>
            <h3>&nbsp;</h3>
            <form class="layui-form" style="display: inline-block">
                <div class="demoTable layui-inline">
                    <div class="layui-inline">
                        订单号：
                    </div>
                    <div class="layui-inline" style="width: 120px; height: 30px;">
                        <input style="height: 30px;" class="layui-input" name="orderId" id="oId" autocomplete="off">
                    </div>
                    <div class="layui-inline" style="margin-left: 30px">
                        订货人：
                    </div>
                    <div class="layui-inline" style="width: 120px; height: 30px">
                        <input style="height: 30px;" class="layui-input" name="name" id="demoReload" autocomplete="off">
                    </div>
                    <div class="layui-inline">
                        <input type="button" data-type="reload" id="selectbyCondition" value="搜索" class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue"></input>
                    </div>
                </div>
            </form>
            <table id="demo" lay-filter="test"></table>
        </div>
        <div class="layui-col-md3">

        </div>
    </div>
</body>

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>
<script>
    // 必须要导入 table模块 layui.use('table',...)
    layui.use('table', function(){
        var table = layui.table;
        // 为表格填充数据
        table.render({
            elem: '#demo'
            ,title:"电子文档列表"
            ,even: true //开启隔行背景
            ,url: '/order/findAllOrder' //获取数据
            //,url: 'http://localhost:8080/book/findByPage' //获取数据
            ,page: true //开启分页
            ,id: 'testReload'
            ,cols: [[ //表头
                {field:'id', width:80, title: '编号', sort: true, align: 'center'}
                ,{field:'name', width:100, title: '姓名', align: 'center'}
                ,{field:'address', title: '发货地址', align: 'center'}
                ,{field:'status', width:100, title: '状态', align: 'center',templet: function(d){
                        if ('1' == d.status) {
                            return '待审核';
                        } else if('2' == d.status) {
                            return '已确认';
                        } else if('3' == d.status) {
                            return '备货中';
                        } else if('4' == d.status) {
                            return '已发货';
                        } else if('5' == d.status) {
                            return '已完成';
                        }
                    }}
                ,{field:"right", width:127, title:"操作",toolbar: '#barDemo', align: 'center'}
            ]]
            ,page:{limit:6//每页显示2条（ 向后台传值，每页显示条数 ）
                ,limits:[2,4,6,8] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<i class="layui-icon layui-icon-left"></i>' //上一页显示内容，默认显示 > <
                ,next: '<i class="layui-icon layui-icon-right"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            },
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var demoReload1 = $('#oId');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        orderId: demoReload1.val(),
                        name: demoReload.val()
                     }
                });
            }
        };

        $('#selectbyCondition').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //layer.msg(JSON.stringify(data));
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                var id = obj.data.id;
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax

                    // 通用的方法
                    $.ajax({
                        type: "POST",
                        async: true,
                        url: "order/deleteById",
                        data: "id="+id,
                        //传递参数也可以是json类型的数据
                        // data: {"username":"张三"},
                        dataType: "text",
                        //回调方法
                        success: function(backdata,status,xmlHttpRequest){
                        },
                    });
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    // window.location.href="/book/deleteById?id="+id;//跳转链接
                });
            } else if(layEvent === 'edit'){ //编辑
                //首先调用的是查询单个的方法
                queryOne(data);//把数据渲染到修改页面
            }
        });
    });
</script>
<script>

    function queryOne(data) {
        layer.open({
            title:['修改订单'],
            type: 1,
            content: $("#updateUser").html(), //修改的页面
            area:['450px','500px'],
            btn:['提交','取消'],
            //弹出后回调
            success:function () {
                $("#id").val(data.id);
                $("#userName").val(data.name);
                $("#userAddress").val(data.userAddress);
                $("#sumPrice").val(data.sumPrice);
                //下单日期
                $("#createDate").val(layui.util.toDateString(data.createDate,'yyyy-MM-dd'));
                //订单状态
                if("1" == data.status){
                    $("#status").append('<option value="1" selected>待审核</option><option value="2">已确认</option><option value="3">备货中</option><option value="4">已发货</option><option value="5">已完成</option>')
                } else if("2" == data.status){
                    $("#status").append('<option value="1">待审核</option><option value="2" selected>已确认</option><option value="3">备货中</option><option value="4">已发货</option><option value="5">已完成</option>')
                } else if("3" == data.status){
                    $("#status").append('<option value="1">待审核</option><option value="2">已确认</option><option value="3" selected>备货中</option><option value="4">已发货</option><option value="5">已完成</option>')
                } else if("4" == data.status){
                    $("#status").append('<option value="1">待审核</option><option value="2">已确认</option><option value="3">备货中</option><option value="4" selected>已发货</option><option value="5">已完成</option>')
                } else if("5" == data.status){
                    $("#status").append('<option value="1">待审核</option><option value="2">已确认</option><option value="3">备货中</option><option value="4">已发货</option><option value="5" selected>已完成</option>')
                }
                //渲染页面
                layui.form.render();//渲染页面
            },
            //提交调用该函数
            yes:function (index) {
                //alert("确认")
                $.ajax({
                    type: "POST",
                    url: "order/updateOrder",
                    data: $("#updateUserForm").serialize(),
                    success: function(msg){
                        // location.reload();//重新加载当前页面
                    }
                });
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            },
            //取消
            btn2:function () {
                //alert("取消")
            }
        });

    }

</script>

<script type="text/html" id="updateUser">
    <h2>&nbsp;</h2>
    <form id="updateUserForm" class="layui-form" style="margin-left: 10px;margin-right: 20px">
        <!-- 页面上不显示id，但是需要作为隐藏域传到后台 -->
        <input type="hidden" id="id" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">订单人姓名</label>
            <div class="layui-input-block">
                <input id="userName" readonly="true" style="background:#fafafa" type="text" name="userName" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">订单人地址</label>
            <div class="layui-input-block">
                <input id="userAddress" readonly="true" style="background:#fafafa" type="text" name="userAddress" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">总金额</label>
            <div class="layui-input-block" >
                <input id="sumPrice" readonly="true" style="background:#fafafa" type="text" name="sumPrice" lay-verify="title" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >下单日期</label>
            <!-- layui-input-block 输入框会占满除文字外的整行 -->
            <div class="layui-input-block">
                <input id="createDate" readonly="true" style="background:#fafafa" type="date" name="createDate" lay-verify="date" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-block">
                <select name="status" id="status">

                </select>
            </div>
        </div>

    </form>

</script>

<script>
    layui.use(["laydate","form"],function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#createDate', //指定元素
            format:'yyyy-MM-dd',
        });
    });
</script>
<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</html>